import React, { useState, useEffect } from 'react';
import { NavBar, Button, Toast, TextArea, Image } from 'antd-mobile';
import { useNavigate, useParams } from 'react-router-dom';
import styles from './PostDetail.module.css';

function PostDetail() {
  const navigate = useNavigate();
  const { postId } = useParams();
  const [postData, setPostData] = useState(null);
  const [comments, setComments] = useState([]);
  const [commentText, setCommentText] = useState('');
  const [isLiked, setIsLiked] = useState(false);
  const [likeCount, setLikeCount] = useState(0);

  // 模拟动态数据
  const mockPostData = {
    1: {
      id: 1,
      userId: 1,
      author: '西瓜',
      avatar: '/33.png',
      time: '2022/05/20 10:00',
      content: '纵然心里有千万般不舍，都也知道真的只能陪到这了，祝各位前程似锦～',
      images: ['/dt.jpg', '/xt.png'],
      likes: 20,
      comments: 3,
      shares: 3
    },
    2: {
      id: 2,
      userId: 1,
      author: '西瓜',
      avatar: '/33.png',
      time: '2022/05/20 10:00',
      content: '祝各位前程似锦！',
      images: [],
      likes: 15,
      comments: 2,
      shares: 1
    },
    3: {
      id: 3,
      userId: 3,
      author: '樱花少女',
      avatar: '/xt.png',
      time: '2024/01/16 11:30',
      content: '春天来了！樱花大道上的樱花开始绽放了，虽然还不是最盛的时候，但已经很美了。期待樱花节的到来～',
      images: ['/33.png'],
      likes: 256,
      comments: 45,
      shares: 32
    },
    4: {
      id: 4,
      userId: 4,
      author: '学霸小王',
      avatar: '/dt.jpg',
      time: '2024/01/16 08:00',
      content: '刚刚完成了期末考试，感觉发挥还不错。这学期的课程安排很充实，学到了很多新知识。现在可以好好放松一下了！',
      images: [],
      likes: 67,
      comments: 8,
      shares: 3
    }
  };

  // 模拟评论数据
  const mockComments = {
    1: [
      {
        id: 1,
        userId: 1,
        author: '西瓜',
        avatar: '/33.png',
        content: '祝福送给各位！',
        time: '3分钟前',
        likes: 288
      },
      {
        id: 2,
        userId: 1,
        author: '西瓜',
        avatar: '/33.png',
        content: '祝福送给各位！',
        time: '3分钟前',
        likes: 288
      },
      {
        id: 3,
        userId: 1,
        author: '西瓜',
        avatar: '/33.png',
        content: '祝福送给各位！',
        time: '3分钟前',
        likes: 288
      }
    ],
    2: [
      {
        id: 4,
        userId: 2,
        author: '同学A',
        avatar: '/dt.jpg',
        content: '一起加油！',
        time: '5分钟前',
        likes: 10
      },
      {
        id: 5,
        userId: 3,
        author: '同学B',
        avatar: '/xt.png',
        content: '感谢分享！',
        time: '3分钟前',
        likes: 8
      }
    ],
    3: [
      {
        id: 5,
        userId: 6,
        author: '摄影师小张',
        avatar: '/dt.jpg',
        content: '樱花真的太美了！期待今年的樱花节',
        time: '1小时前',
        likes: 42
      },
      {
        id: 6,
        userId: 7,
        author: '武大学子',
        avatar: '/xt.png',
        content: '武大的樱花是最美的！',
        time: '30分钟前',
        likes: 18
      }
    ],
    4: [
      {
        id: 7,
        userId: 8,
        author: '同班同学',
        avatar: '/33.png',
        content: '加油！期待你的好成绩',
        time: '2小时前',
        likes: 5
      }
    ]
  };

  useEffect(() => {
    // 加载动态数据
    const post = mockPostData[postId];
    if (post) {
      setPostData(post);
      setLikeCount(post.likes);
      setComments(mockComments[postId] || []);
    }
  }, [postId]);

  // 处理点赞
  const handleLike = () => {
    setIsLiked(!isLiked);
    setLikeCount(prev => isLiked ? prev - 1 : prev + 1);
    Toast.show({
      content: isLiked ? '取消点赞' : '点赞成功！',
      position: 'center'
    });
  };

  // 处理分享
  const handleShare = () => {
    Toast.show({
      content: '分享成功！',
      position: 'center'
    });
  };

  // 添加评论
  const handleAddComment = () => {
    if (!commentText.trim()) {
      Toast.show({
        content: '请输入评论内容',
        position: 'center'
      });
      return;
    }

    const newComment = {
      id: Date.now(),
      userId: 999, // 当前用户ID
      author: '我',
      avatar: '/33.png',
      content: commentText,
      time: '刚刚',
      likes: 0
    };

    setComments(prev => [...prev, newComment]);
    setCommentText('');
    Toast.show({
      content: '评论成功！',
      position: 'center'
    });
  };

  // 评论点赞
  const handleCommentLike = (commentId) => {
    setComments(prev =>
      prev.map(comment =>
        comment.id === commentId
          ? { ...comment, likes: comment.likes + 1 }
          : comment
      )
    );
  };

  if (!postData) {
    return (
      <div className={styles.container}>
        <NavBar onBack={() => navigate(-1)}>动态详情</NavBar>
        <div className={styles.loading}>加载中...</div>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <NavBar
        onBack={() => navigate(-1)}
        className={styles.navBar}
        right={
          <Button fill="none" className={styles.menuButton}>
            ⋯
          </Button>
        }
      >
        动态详情
      </NavBar>

      <div className={styles.content}>
        {/* 动态内容 */}
        <div className={styles.postContent}>
          <div className={styles.postHeader}>
            <div className={styles.userInfo}>
              <img src={postData.avatar} alt="avatar" className={styles.avatar} />
              <div className={styles.userDetails}>
                <div className={styles.authorName}>{postData.author}</div>
                <div className={styles.postTime}>{postData.time}</div>
              </div>
            </div>
          </div>

          <div className={styles.postText}>{postData.content}</div>

          {postData.images && postData.images.length > 0 && (
            <div className={styles.postImages}>
              {postData.images.map((img, index) => (
                <div key={index} className={styles.imageContainer}>
                  <Image src={img} alt={`post-${index}`} className={styles.postImage} />
                </div>
              ))}
            </div>
          )}
        </div>

        {/* 评论区域 */}
        <div className={styles.commentsSection}>
          <div className={styles.commentsHeader}>
            <h3>全部评论</h3>
          </div>

          <div className={styles.commentsList}>
            {comments.map(comment => (
              <div key={comment.id} className={styles.commentItem}>
                <img src={comment.avatar} alt="avatar" className={styles.commentAvatar} />
                <div className={styles.commentContent}>
                  <div className={styles.commentHeader}>
                    <span className={styles.commentAuthor}>{comment.author}</span>
                    <span className={styles.commentTime}>{comment.time}</span>
                  </div>
                  <div className={styles.commentText}>{comment.content}</div>
                </div>
                <div className={styles.commentActions}>
                  <Button
                    size="mini"
                    fill="none"
                    className={styles.commentLikeBtn}
                    onClick={() => handleCommentLike(comment.id)}
                  >
                    👍 {comment.likes}
                  </Button>
                </div>
              </div>
            ))}

            {comments.length === 0 && (
              <div className={styles.noComments}>
                <div className={styles.emptyIcon}>💬</div>
                <div className={styles.emptyText}>暂无评论，快来抢沙发吧～</div>
              </div>
            )}

            {comments.length > 0 && (
              <div className={styles.loadMore}>
                <span>没有更多了～</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className={styles.bottomActions}>
        <div className={styles.commentInput}>
          <TextArea
            placeholder="添加评论..."
            value={commentText}
            onChange={setCommentText}
            autoSize={{ minRows: 1, maxRows: 3 }}
            className={styles.textArea}
          />
        </div>
        <div className={styles.actionButtons}>
          <Button
            size="small"
            fill="none"
            className={styles.actionBtn}
          >
            💬 {comments.length}
          </Button>
          <Button
            size="small"
            fill="none"
            className={styles.actionBtn}
            onClick={handleShare}
          >
            🔄 {postData.shares}
          </Button>
          <Button
            size="small"
            fill="none"
            className={`${styles.actionBtn} ${isLiked ? styles.liked : ''}`}
            onClick={handleLike}
          >
            {isLiked ? '❤️' : '🤍'} {likeCount}
          </Button>
          <Button
            color="primary"
            size="small"
            onClick={handleAddComment}
            className={styles.sendBtn}
          >
            发送
          </Button>
        </div>
      </div>
    </div>
  );
}

export default PostDetail; 